<template>
    <view class="list-item">
        <view class="icon" v-if="item.AFullName">
            {{ item.AFullName.substr(0, 1) }}
        </view>
        <view class="icon" v-else></view>
        <view class="info">
            <view class="info-detail">
                <view class="cate-percentage">
                    <text class="cate">{{ item.AFullName }}</text>
                    <text class="percentage" v-if="total != 0"> {{ ((item.Total / total) * 100).toFixed(2) }}% </text>
                    <text class="percentage" v-else> 0% </text>
                </view>
                <view class="cate-sum">¥{{ item.Total || 0 }}</view>
            </view>
            <view class="line">
                <view class="line-per" v-if="total != 0" :style="{ width: (item.Total / total) * 100 + '%' }"></view>
                <view class="line-per" v-else style="width: 0"></view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    props: {
        item: {
            type: Object,
            default: () => {},
        },
        // 费用总计
        total: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {}
    },
    onShow() {},
}
</script>

<style lang="scss">
.list-item {
    display: flex;
    padding: 0 0 40rpx;
    .icon {
        width: 80rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background: #f9faf9;
        border-radius: 40rpx;
        margin-right: 24rpx;
        font-size: 38rpx;
    }
    .info {
        flex: 1;
        .info-detail {
            display: flex;
            justify-content: space-between;
            margin-bottom: 24rpx;
            font-size: $size-24;
            .cate-percentage {
                .cate {
                    padding-right: 12rpx;
                }
                .percentage {
                    color: $color-gray-3;
                }
            }
            .cate-sum {
                font-weight: bold;
            }
        }
        .line {
            height: 12rpx;
            background: #fafafa;
            border-radius: 6rpx;
            .line-per {
                // width:50%;
                height: 12rpx;
                border-radius: 6rpx;
                background: $app-color-main;
            }
        }
    }
}
</style>
